<template>
  <div
    class="error-box"
    :style="{ ...position }"
    v-if="alertMessage.length > 0"
  >
    <div class="error-tag">
      紧急
    </div>
    <div class="alertEq-id">
      {{ (alertMessage as any)[0].eqCode }}
    </div>
    <div class="alert-message">
      {{ (alertMessage as any)[0].alertContent }}
    </div>
    <div
      class="handle-btn"
      @click="chooseItem((alertMessage as any)[0].alertMessageId)"
    >
      处理
      <el-icon>
        <ArrowRightBold />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { getGeneralValues } from "@/api/general";
import { getEqDetails, getEquipmentIds } from "@/api/equipment";
import { toRefs, onMounted, ref } from "vue";
import { addDialog, closeDialog } from "../redialog";
import { getAlertMessageDetail } from "@/api/alert";
import { useAlertDetailStore } from "@/stores/alertDeail";
const alertDetailStore = useAlertDetailStore();
const props = defineProps({
  alertMessage: {
    type: Array,
    default: [],
  },
  position: {
    type: Object,
    default: () => ({ top: 0, left: 0 }),
  },
});
const { position, alertMessage } = toRefs(props);

const data = ref([]);
const chooseItem = async (item: any) => {
  const testclose = (options, index) => {
    return () => closeDialog(options, index);
  };

  // 已处理变为查看

  let id = item;
  let res = (await getAlertMessageDetail(id)) as any;

  if (res.code == 200) {
    getEqDetails(res.data.businessId).then((res1) => {
      let alertMessage = {
        equipmentId: res.data.businessId,
        alertMessageId: res.data.id,
        alertContent: res.data.alertContent,
        alertGrade: res.data.alertGrade,
        handleStatus: res.data.handleStatus,
        imgFlag: res.data.imgFlag,
        equipmentName: res.data.equipmentName,
        equipmentType: res.data.equipmentType,
        equipmentLocation: res1.data.equipmentLocation,
        imageUrl: res.data.imageUrl,
        timeOfDuration: res.data.timeOfDuration,
        equipmentLocationCode: res1.data.equipmentLocationCode
          ? res1.data.equipmentLocationCode
          : "",
        alertToneUrl: null,
        latestAlertTime: res.data.latestAlertTime,
        alertType: null,
        id: null,
      };

      useAlertDetailStore().SetMessage(alertMessage);
      addDialog({
        contentRenderer: ({ options, index }) => (
          <alertDialog closeFn={testclose(options, index)}> </alertDialog>
        ),
        class: "alertDialog",
        headerRenderer: ({ close, titleId, titleClass }) => (
          // jsx 语法
          <reHeader
            headerId={titleId}
            headerClass={titleClass}
            closeFn={close}
            headerTitle={"处理告警"}
          >
            {" "}
          </reHeader>
        ),
        hideFooter: true,
      });
    });
  }
};
</script>

<style scoped lang="scss">
.error-box {
  position: absolute;
  width: clamp(16.438rem, 13.7vw, 32.875rem);
  height: clamp(3rem, 2.5vw, 6rem);
  background-color: rgba(10, 47, 77, 0.8);

  transform: translate(-10%, -150%);
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  cursor: default;
  padding: clamp(0.75rem, 0.63vw, 1.5rem) clamp(1.063rem, 0.89vw, 2.125rem);
  box-sizing: border-box;
  justify-content: space-between;

  .error-tag {
    width: clamp(2.813rem, 2.34vw, 5.625rem);
    height: clamp(1.5rem, 1.25vw, 3rem);
    background: rgba(128, 32, 25, 0.4);
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #ff3f34;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 63, 52, 1);
  }

  .handle-btn {
    color: rgba(38, 190, 255, 1);
    font-size: clamp(0.75rem, 0.63vw, 1.5rem);
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
</style>
